import React from 'react'

import { NavBar, Space, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Card, Button } from 'antd-mobile'
import { Selector } from 'antd-mobile'

function Index() {
    // 选座
    let nav=useNavigate()
    const options = [
        // {
        //   label: 'A',
        //   value: '1',
        // },
        // {
        //   label: 'B',
        //   value: '2',
        // },
        // {
        //   label: 'C',
        //   value: '3',
        // },
      ]
  return (
    // 1. 没有选择乘车人不出现选座模块，选中乘车人之后出现选座模块并实现选座选车厢功能
    // 2-2 当乘车人少于等于1人的时候， 出现一排选座
    // 2-3 重复选座的时候， 后面的选座覆盖最先选座的位置
    // 2-4支持按坐席类型（一等座、二等座等）筛选和选择，实时更新可选坐席信息。
    <div>
     <NavBar onBack={()=>nav(-1)}>填写订单</NavBar>
     <div style={{backgroundColor:'#ffff',margin:'10px',height:'100px'}}>
        已选:1成人
        {/* 1-1 选择乘车人，乘车人可以实现选择多个的功能 */}
        <Card  style={{backgroundColor:'#f2f2f2f2',margin:'10px'}} onClick={()=>nav('/sit')}>
        姓名：张三，
            身份证号:12345678910,
            手机号:1314567889
            <Button>成人</Button><Button>删除</Button>
        </Card>
       
       &emsp;&emsp;&emsp; &emsp;&emsp;&emsp;
        <Button style={{backgroundColor:'orange'}} onClick={()=>nav('/zheng')}>+添加乘客（成人/学生/儿童）</Button>
       </div>
       <div style={{marginTop:'50px'}}>
    在线选座
       <Selector options={options} defaultValue={['1']}  />
          <Selector
            options={[
              {
                label: 'A',
                value: '1',
              },
              {
                label: 'B',
                value: '2',
                disabled: true,
              },
              {
                label: 'C',
                value: '3',
              },
              {
                label: 'D',
                value: '1',
              },
              {
                label: 'F',
                value: '2',
                disabled: true,
              },
              
            ]}
            defaultValue={['3']}
          />
          选车厢
          <Selector options={options} defaultValue={['1']}  />
          <Selector
            options={[
              {
                label: '02',
                value: '1',
              },
              {
                label: '03',
                value: '2',
                disabled: true,
              },
              {
                label: '04',
                value: '3',
              },
              {
                label: '05',
                value: '1',
              },
              {
                label: '06',
                value: '2',
                disabled: true,
              },
              {
                label: '07',
                value: '2',
                disabled: true,
              },
              {
                label: '08',
                value: '2',
                disabled: true,
              },
              
            ]}
            defaultValue={['3']}
          />
       </div>
       <div style={{marginTop:'250px',marginLeft:'400px'}}>
           <span style={{color:'red'}}>￥355</span>
       <Button style={{backgroundColor:'red'}} onClick={()=>nav('/order')}>去支付</Button>
       </div>
    </div>
  )
}

export default Index
